<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>绑定银行卡</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/css.css" />
    <style>
        header {
            background-color: rgba(8, 122, 255, 1);
        }

        header ul li {
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: none;
            color: #fff;
            position: relative;
            font-size: 18px;
        }

        header ul li.active {
            display: block;
        }


        .mt20 {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .login-form {
            width: 90%;
            margin: 10px auto;
            margin-top: 60px;
        }

        .sub-login {
            width: 99%;
            height: 45px;
            opacity: 1;
            color: #fff;
            margin-top: 45px;
            text-align: center;
            line-height: 45px;
            border-radius: 40px;
            box-shadow: 0px 7px 30px 0px rgba(2, 176, 255, 0.2);
            background: -webkit-gradient(linear, 0 0%, 80% 100%, from(#E6615C), to(#B92D24));
        }

        .reg-form1 {
            height: 45px;
            line-height: 45px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .reg-form1 span {
            width: 70px;
            margin-left: 20px;
        }
        .reg-form1 .w100{width: 100%;text-align: left;}
        .reg-input{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
        }
        .w80{width: 80%;}
        .tixing{
            width: 100%;
            background: #EEEEEE;
            height: 45px;
            line-height: 45px;
            font-size: 12px;
            text-indent: 30px;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div v-cloak id="wrap" class="flex-wrap flex-vertical">
        <header>
            <ul>
                <li class="active">
                    <i onclick="back()" class="icon iconfont icon-back"></i>
                    <span>绑定银行卡</span>
                </li>
            </ul>
        </header>
        <div class="reg-form fixed-header">
            <div class="reg-form1">
                <span>卡号</span>
                <input type="number" v-model="card" placeholder="请输入卡号">
            </div>
        </div>
        <div class="tixing">提醒：如果修改请联系客服400-0000-0000</div>
        <div class="login-form">
            <div class="sub-login" @click="bindCard">
                绑定
            </div>
        </div>
    </div>
</body>

</html>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script>
var vm = new Vue({
    el: "#wrap",
    data: {
        userinfo: [],
        editAddress: false,
        userinfo2: [],
        bio: '',
        sfz: '',
        card: '',
        avatar: '',
        nickname: '',
        mobile: '',
        checked: 0,
        release: false
    },
    mounted: function() {
        var that = this;

        apiready = function() {
            var photoBrowser = api.require('photoBrowser');
            that.getrefUserinfo()
            api.parseTapmode();
            api.addEventListener({ //监听安卓返回键
                name: 'keyback'
            }, function(ret, err) {
                api.closeWidget() //关闭应用
            });
        };
    },
    methods: {
        bindCard: function() {
            var that = this;
            if (this.card.length < 16) {
                api.toast({ msg: '请输入正确的卡号', location: 'middle' });
                return
            }
            showProgress();
            var token = $api.getStorage('userInfo').token
            api.ajax({
                url: ajaxRoute.bindbank,
                method: 'post',
                data: {
                    values: {
                        token: token,
                        bankaccount: that.card
                    }
                }
            }, function(ret, err) {
                if (ret.code == 1) {
                    api.hideProgress();
                    api.toast({ msg: '绑定成功', location: 'middle' });
                } else {
                    api.hideProgress();
                    api.toast({ msg: ret.msg, location: 'middle' });
                }
            });
        }
    },
    filters: {
        getTel: function(value) {
            var phone = value
            return phone.substr(0, 3) + "****" + phone.substr(7)
        },
        getCard: function(value) {
            var phone = value
            return phone.substr(0, 5) + "********" + phone.substr(12)
        },
        getchecked: function(e) {
            var checked = ''
            if (e == 0) {
                checked = '审核中'
            } else {
                checked = '已审核'
            }
            return checked
        }
    }
})
</script>
